<template>
	<!-- 顶部卡片区域 -->
	<view class="wrap ">
		<view class="top_card acea-row row-column" style="flex-wrap: nowrap;">
			<view class="top acea-row row-middle row-between" style="maring-bottom: 25rpx;width: 100%;">
				<text class="font32 col_33">{{data.title || ''}}</text>
				<text class="font30 col_80">匹配数量： {{total}}</text>
			</view>
			<view class="btns font26 acea-row row-middle row-between "
				style="position: relative; width: 100%;padding: 20rpx  15rpx 0;">
<!-- 				<dropdown-screen :listArr="listArr" :itemArr="itemArr" :screenBarStyle="screenBarStyle"
					:isShowMask="false" activeColor="#EE212D" :isButtonMode="true" :itemNum="3" :activeIndex="activeIdx"
					@finish="finish" ref="down" style="width:100%;">
					<template v-slot:head>
						<view :class="activeIdx == 0 ? 'col_ff bg_red':'col_33 bg_gray'" @click="changeTab(0)">全部</view>
					</template>
				</dropdown-screen> -->
				<view :class="activeIdx == 0 ? 'col_ff bg_red':'col_33 bg_gray'" @click="changeTab(0)">推荐</view>
				<view :class="activeIdx == 1 ? 'col_ff bg_red':'col_33 bg_gray'" @click="changeTab(1)">附近</view>
				<view :class="activeIdx == 2 ? 'col_ff bg_red':'col_33 bg_gray'" @click="changeTab(2)">最新</view>
			</view>
		</view>
		<!-- 列表数据 -->
		<view class="bottom">
			<view class="list rent-out" style="margin-bottom: 20rpx;">
				<view class="item" v-for="(item,index) in listData" :key="index" style="margin-bottom: 20rpx;">
					<beCurrent :item="item" :isTozx="true" :isMatch="true" />
				</view>
				
			</view>
			<view class='loadingicon acea-row row-center-wrapper' @click="loadMore">
				<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
			</view>

		</view>
	</view>
</template>

<script>
	import dropdownScreen from '../components/dropdown-screen/dropdown-screen'
	import {
		DateMatch, //匹配通用
	} from '@/api/template.js'
	import beCurrent from '@/components/listItems/beCurrent.vue'
	export default {
		components: {
			dropdownScreen,
			beCurrent
		},
		data() {
			return {
				activeIdx: 0,
				loading: false,
				loadTitle: '加载更多',
				type: -1,
				data: {},
				vid: -1,
				list: [],
				listData:[],
				page: 1,
				total: 0,
				categoryArr: [],
				listArr: ["访问次数", "停留时长"],
				itemArr: [
					[{
						text: '多优先',
						value: 0
					}, {
						text: '少优先',
						value: 1
					}],
					[{
						text: '长优先',
						value: 2
					}, {
						text: '短优先',
						value: 3
					}]
				],
				types: [{
						name: '全部',
						type: 'all'
					}, {
						name: '出租',
						type: 'jy',
						status: '0'
					},
					{
						name: '出售',
						type: 'jy',
						status: '1'
					},
					{
						name: '转让',
						type: 'jy',
						status: '2'
					}, {
						name: '求租',
						type: 'qz',
						status: '3'
					}, {
						name: '求购',
						type: 'qg',
						status: '4'
					},
					{
						name: '招工',
						type: 'zg',
						status: '6'
					}, {
						name: '求职',
						type: 'qzs',
						status: '5'
					}
				],
				//模板接口字段，用于筛选
				fileds: {
					'jy': {
						'0': {
							workingGroup: 'businessForm',
							avea: 'areaRange',
							supportingFacility: 'supp',
							rent: 'rentRange',
							storefrontType: 'pavementsType',
							storeCategory: 'storeCategory',
							floor: 'floors',
							district: 'dis',
							reutLongdate: 'leases',
							transferFee: 'sellAmount',

						},
						'1': {
							district: 'dis',
							avea: 'areaRange',
							floor: 'floors',
							sellOunt: 'serviceAmount',
							storeCategory: 'storeCategory',
							returnInvestment: 'userRate',
						},
						'2': {
							workingGroup: 'businessForm',
							avea: 'areaRange',
							supportingFacility: 'supp',
							rent: 'rentRange',
							storefrontType: 'pavementsType',
							floor: 'floors',
							district: 'dis',
							reutLongdate: 'leases',
							transferFee: 'sellAmount',
							storeCategory: 'storeCategory',
						}
					},
					'qz': {
						area: {
							type: 'range',
							skey: 'areaRange',
							ekey: 'areaRanges',
							sp: '-'
						},
						storeCategory: 'storeCategory',
						rent: {
							type: 'range',
							skey: 'rentRange',
							ekey: 'rentRanges',
							sp: '-'
						},
						categoryId: 'businessForm',
						floor: 'floors',
						sspre: 'supp',
						district: 'dis',
						rentYear: 'leases',
						storefrontType: 'pavementsType',
						transferFee: 'sellAmount',
					},
					'qg': {
						area: {
							type: 'range',
							skey: 'areaRange',
							ekey: 'areaRanges',
							sp: '-'
						},
						storeCategory: 'storeCategory',
						money: 'sellAmount',
						hopeArea: 'dis',
						floor: 'floors',
						rate: 'userRate',
					},
					'zg': {
						job: 'positions',
						industry: 'industry',
						experience: {
							type: 'range',
							skey: 'rangeExperience',
							ekey: 'rangeExperiences',
							sp: '-'
						},
						salary: {
							type: 'range',
							skey: 'salaryRange',
							ekey: 'salaryRanges',
							sp: '-'
						},
						jobMark: 'keywords'
					},
					'qzs': {
						job: 'positions',
						hopeIndustry: 'industry',
						workExperience: 'rangeExperience',
						salary: {
							type: 'range',
							skey: 'salaryRange',
							ekey: 'salaryRanges',
							sp: '-'
						},
						mark: 'keywords'
					}
				},
				screenBarStyle: {
					padding: "0 30rpx"
				},
				sort: 0,
				mind: 0
			}
		},
		onLoad(options) {
			if (!options.data) {
				this.$util.Tips({
					title: '数据获取失败'

				}, {
					tab: 3
				})
				return;
			}
			this.data = JSON.parse(options.data);
			this.mind = options.mind ? options.mind : this.mind;

			if (this.data.id) {
				this.type = this.data.vistype ? this.data.vistype : 1;
				this.vid = this.data.id;
			} else if (this.data.buystoreId) {
				this.type = 7;
				this.vid = this.data.buystoreId;
			} else {
				this.type = 6;
				this.vid = this.data.askrentId;
			}
			this.toMatch(this.data);
			// this.getList()
		},
		methods: {
			async toMatch() {
				let emitData = this.filedSx(this.data);
				emitData.data.businessForm = emitData.data.businessForm && Array.isArray(emitData.data.businessForm) ? emitData.data.businessForm.join(',') : '';
				let res = null;
				let parmas = {
					page: this.page,
					screening: {
						city: this.data.city
						// city: this.navList[this.categoryOn].city
					},
					userMatch: {
						// sort: this.sxx[this.filterOn].sort,
						sort: this.sort,
						appKey: 'xcx',
						...emitData.data,
						// ...this.navList[this.categoryOn],
						longitude: this.$location.longitude,
						latitude: this.$location.latitude
					}

				};
				this.loading = true;
				console.log('parmas', parmas)
				res = await DateMatch(parmas);
				console.log('ddd',res.data.list)
				this.loading = false;
				this.total = res.data.total;
				res && res.data.list.forEach(item => {
					if (item.askrentId) {
						item.status = 3
					} else if (item.buystoreId) {
						item.status = 4;
					}

				})
				if (res.code == 200) {
					this.listData = [...this.listData, ...res.data.list];
					if (!res.data.list || res.data.list.length < 1) {
						if(this.page == 1){
							this.loadTitle = "暂未获取到数据"
						}else{
							this.loadTitle = "暂无更多"
						}
					}
				} else {
					this.$util.Tips({
						title: '匹配失败'
					})
				}


				console.log('data', this.listData);
			},
			changeTab(index) {
				this.activeIdx = index;
				this.sort = index;
				this.page = 1;
				this.listData = [];
				// this.$refs.down.initUpdateArr()
				this.toMatch()
			},
			loadMore() {
				this.page++
				this.toMatch()
			},
			finish(data) {
				this.activeIdx = data.$index + 1
				this.sort = data.value
				this.page = 1;
				this.getList();
			},
			getList() {
				if (this.page == 1) {
					this.list = []
				}
			},
			//筛选字段
			filedSx(d) {

				let tag = {}
				let nf = {}
				let t = this.checkt('all', d)
				if (t == 'jy') {
					tag = this.types.filter(item => item.status == d.status)[0];
					let st = tag.status
					nf = this.fileds[t][st];
				} else {
					tag = this.types.filter(item => item.type == t)[0];
					nf = this.fileds[t];
				}
				console.log("-------tag", tag)
				// console.log(nf)
				return {
					// tag,
					data: this.filedGz(nf, d),
					// sd: d
				}
			},
			checkt(t, d) {
				if (t !== 'all') {
					return t;
				}
				if (d.askrentId) {
					t = 'qz';
				} else if (d.buystoreId) {
					t = 'qg';
				} else if (d.type == 5) {
					t = 'zg';
				} else if (d.type == 6) {
					t = 'qzs';
				} else {
					t = 'jy';
				}
				return t;
			},
			//字段规则
			filedGz(gz, data) {
				if (!data) return;
				let obj = {}
				// console.log('gz',gz)
				for (let k in gz) {
					let gzk = gz[k];
					if (typeof gzk == "string") {
						// console.log(gzk,data[k])
						obj[gzk] = data[k] ? data[k] : ' '
					} else {
						// console.log('gzk',gzk)
						if (gzk.type == 'range') {
							obj[gzk.skey] = data[k] ? data[k].split(gzk.sp)[0] : ' '
							obj[gzk.ekey] = data[k] ? data[k].split(gzk.sp)[1] : ' '
						}
					}

				}
				obj.latitude = data.latitude;
				obj.longitude = data.longitude;
				obj.city = data.city;
				obj.district = data.district;
				obj.name = data.title;
				obj.infoId = data.id || data.askrentId || data.buystoreId;
				if (data.askrentId) {
					obj.type = 3;
				} else if (data.buystoreId) {
					obj.type = 4;
				} else {
					obj.type = data.status;
				}
				console.log("dataeeeeee", data)
				return obj;
			}
		}

	}
</script>

<style lang="scss" scoped>
	page {
		background: #F7F8FA;
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: 100vh;
		padding: 30rpx 28rpx;
	}

	.font20 {
		font-size: 20rpx;
	}

	.font22 {
		font-size: 22rpx;
	}

	.font24 {
		font-size: 24rpx;
	}

	.font26 {
		font-size: 26rpx;
	}

	.font30 {
		font-size: 30rpx;
	}

	.font32 {
		font-size: 32rpx;
	}

	.font36 {
		font-size: 36rpx;
	}

	.red {
		color: #EE212D;
	}

	.bg_red {
		background-color: #EE212D;
	}

	.bg_gray {
		background-color: #F7F7F7;
	}

	.col_80 {
		color: #808080;
	}

	.col_A6 {
		color: #a6a6a6;
	}

	.col_33 {
		color: #333333;
	}

	.col_ff {
		color: #ffffff;
	}

	.top_card {
		width: 100%;
		box-sizing: border-box;
		min-height: 192rpx;
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
		padding: 30rpx 0;

		.top {
			padding: 0 30rpx;
		}

		.btns {
			// margin-top: 24rpx;

			view {
				width: 190rpx;
				height: 60rpx;
				border-radius: 10rpx;
				line-height: 60rpx;
				text-align: center;
			}
		}
	}

	.bottom {
		overflow: auto;
		flex: 1;
		width: 100%;
		box-sizing: border-box;
		// background-color: #fff;
		border-radius: 10rpx;
		padding-bottom: 116rpx;

		.listItem {
			margin: 0 15rpx;
			padding: 38rpx 0;
			border-bottom: 2rpx solid #eee;

			image {
				width: 88rpx;
				height: 88rpx;
				border-radius: 44rpx;
				margin-right: 20rpx;
			}

			.info {
				flex: 1;
			}

			.info,
			.other {
				text:first-child {
					margin-bottom: 14rpx;
				}
			}
		}
	}
</style>